<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">监管人员</small>
      </a>
    </header>
  
    <main>
      <div class="formcontent">
        <ul>
          <li>
            <span><em>*</em>头像</span>
            <div class="froms">
                <div class="imgbox">
                    <img id="PictureShow" :src="formdata.serverFullPath">
                </div>
            </div>
          </li>
          <li>
            <span><em>*</em>部门名称</span>
            <div class="froms">
              <input type="" v-model="formdata.Institution" disabled>
            </div>
          </li>
          <li>
            <span><em>*</em>姓名 </span>
            <div class="froms">
              <input type="" v-model="formdata.Name" disabled>
            </div>
          </li>
          <li>
            <span><em>*</em>职务 </span>
            <div class="froms">
              <input type="" v-model="formdata.Post" disabled>
            </div>
          </li>
          <li>
            <span><em>*</em>岗位职责 </span>
            <div class="froms">
              <input type="" v-model="formdata.PositionStatement" disabled>
            </div>
          </li>
          <li>
            <span><em>*</em>执法证号 </span>
            <div class="froms">
              <input type="" v-model="formdata.Code" disabled>
            </div>
          </li>
          <li>
            <span><em>*</em>人员类别 </span>
            <div class="froms">
              <input type="" v-model="formdata.PersonType" disabled>
            </div>
          </li>
          <li>
            <span><em>*</em>办公电话 </span>
            <div class="froms">
              <input type="" v-model="formdata.OfficePhone" disabled>
            </div>
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
  import {
    SupervisorDetail
  } from '../../api/api';
  export default {
    data() {
      return {
        listData: {},
        unid: this.$route.query.unid,
        formdata: {
          Institution:'',
          Name:'',
          Post: '',
          PositionStatement: '',
          Code:'',
          PersonType:'',
          OfficePhone: '',
        }
      };
    },
    methods: {
      //数据加载方法
      getData() {
        //定义需要传给通讯的参数： unid    
        let options = {
          params: {
            id: this.$route.query.unid
          }
        }
  
        //调取接口
        SupervisorDetail(options).then((res) => {
          if (res.success === true) {
            this.listData = res.data;
            this.formdata.Institution = this.listData.institution.name;
            this.formdata.Name = this.listData.name;
            this.formdata.Post = this.listData.post.name;
            this.formdata.PositionStatement = this.listData.positionStatement;
            this.formdata.Code = this.listData.code;
            this.formdata.PersonType = this.listData.personType;
            this.formdata.OfficePhone = this.listData.officePhone;
            this.formdata.serverFullPath=this.listData.pictureFile.serverFullPath
          }
        })
      },
  
    },
    created() {
      this.getData();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  
</style>
